<template>
	<view class="phone-main" :style="{height: winHeight + 'px'}">
		<view class="phone-main-search">
			<!-- <navigator :url="'phone-search?phones=' + phonesEscape" hover-class="none">
				<input disabled="false" class="phone-main-input" type="text" placeholder="请输入要搜索的联系人"/>
			</navigator> -->
      <view class="" style="display: flex;
  justify-content: space-between;
  align-items: center;">
        <view class="phone-main-input">
          <text class="fu-iconfont" style="color: #999;margin-right: 10rpx;"></text><input @confirm="search" v-model="searchCity" placeholder="请输入想要搜索的好友"/>
        </view>
        <view class="search" @click="search">
          <text>搜索</text>
        </view>
      </view>
      <view class="locationCity">
        当前聊天:{{city || '张启山'}}
      </view>
		</view>
		<view class="phoneDirectory" style="position: relative;">
			<city-list
			:citylists="citylists"
			:letter="letter"
			:scrollAnimationOFF="scrollAnimationOFF"
			@change="handlePhoneListIndex"
			@reset="handleReset"
			@handleClick="handleClick"
			style="width: 100vw;"
			>
			</city-list>
			<city-alphabet
			:citylists="citylists"
			:phoneListIndex="phoneListIndex"
			@change="handleDatasetKey"
			@scrollAnimationOFF="handleScrollAnimationOFF"
			@reset="handleReset"
			style="position: absolute;right: 20rpx;"
			>
			</city-alphabet>
		</view>
	</view>
</template>

<script>
	import cityList from './city-list.vue'
	import cityAlphabet from './city-alphabet.vue'
  import PinyinUtils from './pingyinUtils.js';
	export default {
		name:"city-directory",
		components:{
			cityList,
			cityAlphabet
		},
		props:{
			citylists:Object,
			default:false,
      city:String,
		},
		data () {
			return {
				winHeight:0,
				letter : 'A',
				scrollAnimationOFF:true,
				phoneListIndex:'A',
				reset:true,
        searchCity:''
			}
		},
		computed:{
			phonesEscape () {
				return escape(JSON.stringify(this.citylists))
			}
		},
		mounted () {
			let windowHeight = uni.getSystemInfoSync().windowHeight

			// #ifndef APP-PLUS
			this.winHeight = windowHeight
			//#endif

			//#ifdef APP-PLUS
			this.winHeight = windowHeight - 56
			//#endif

 			if(!this.citylists){
				uni.showToast({
					title: '没有数据',
					icon:"none",
					mask: false,
					duration: 1500
				})
			}
		},
		methods:{
      search() {
        if(!this.searchCity) {
          uni.showToast({
            title:'输入内容为空',
            icon:'none'
          })
        }
        this.phoneListIndex = PinyinUtils.chineseToPinYinFirst(this.searchCity)[0];
        this.letter = PinyinUtils.chineseToPinYinFirst(this.searchCity)[0];
        console.log(PinyinUtils.chineseToPinYinFirst(this.searchCity)[0])
      },

			handleClick (e) {
				this.$emit('paramClick',e)
			},
			handleDatasetKey (val) {
				this.letter = val
			},
			handleScrollAnimationOFF (val) {
				this.scrollAnimationOFF = val
			},
			handlePhoneListIndex(val){
				// if(this.reset){
					this.phoneListIndex = val
				// }
			},
			handleReset (val){
				if(val){
					this.letter = ''
				}
				this.reset = val
			}

		}
	}
</script>

<style>
.phone-main{
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.phoneDirectory{
	display: flex;
	flex-direction: row;
}
.phone-main-search{
  padding-top: 32rpx;

	/* background-color: #fff;
	padding: 10upx 20upx;
	border-bottom: 1px solid #e5e5e5; */
  width: 750rpx;
  padding-left: 32rpx;
  padding-right: 32rpx;
  height: 200rpx;
  background: #fff;
  opacity: 1;
  /* border-radius: 100rpx; */
}

.phone-main-input{
  display: flex;
	font-size:28upx;
  width: 593rpx;
  height: 62rpx;
  background: #eee;
  align-items: center;
  opacity: 1;
  padding-left: 26rpx;
  border-radius: 100rpx;
}


.locationCity {
  font-size: 32rpx;
  margin-top: 28rpx;
  padding-bottom: 28rpx;
}
.search{
	width: 15%;
	}
</style>
